<template>
  <BorderBox
    title="审计日志"
    :headerBottom="false"
    style="margin-left: 16px"
    :styleText="{ maxHeight: 'calc(100vh - 520px)', 'overflow-y': 'auto' }"
  >
    <template #main_info>
      <ga-timeline mode="left" v-if="auditLog?.length > 0">
        <ga-timeline-item
          position="bottom"
          dot-type="hollow"
          v-for="(item, index) in auditLog"
          :key="index"
          :dotColor="index % 2 === 0 ? '#52C419' : '#00BBF0'"
        >
          <template #label>
            <div class="content_main">
              <p class="text_overflow">
                {{ item?.message || "-" }}
              </p>
            </div>
          </template>
          <div class="content flex_between_aligncenter">
            <span
              class="title"
              :style="{ color: index % 2 === 0 ? '#52C419' : '#00BBF0' }"
            >
              {{ item?.title || "-" }}
            </span>
            <span class="time">{{ item?.time || "-" }}</span>
          </div>
        </ga-timeline-item>
      </ga-timeline>
      <ga-empty v-else />
    </template>
  </BorderBox>
</template>

<script setup>
defineProps({ auditLog: Array });
</script>

<style lang="scss" scoped>
.content_main {
  background: #f7f9fc;
  color: #011948;
  padding: 8px;
  .text_overflow {
    width: 99%;
  }
}
.content {
  .time {
    color: #999;
  }
}

:deep(.garco-timeline-item-dot) {
  width: 9px;
  height: 9px;
  left: -1px;
}
.container_border {
  width: 60%;
  // overflow-y: auto;
  // max-height: calc(100vh - 303px);
}
</style>
